import React, { Component } from "react";
import { View, Text, Image, StyleSheet, ScrollView,TouchableWithoutFeedback} from "react-native";
import CustomerHeader from "../../widget/customerHeader";
import * as RootNavigation from '../../../App'

const Cell=({title,bottomLine, content,contentColor,callBack})=>{
  return (
    <TouchableWithoutFeedback onPress={callBack}>
      <View style={styles.cell}>
        <Text style={styles.title}>{title}</Text>
        <View style={styles.right}>
          <Text style={[styles.content,{color:contentColor}]}>{content?content:''}</Text>
          <Image style={{width:6,height:12}} source={require('../../img/arrow_right_gray.png')}></Image>
        </View>
        {bottomLine?<View style={styles.bottomLine}></View>:null}
      </View>
    </TouchableWithoutFeedback>
  )
}

export default class Set extends Component{
  constructor(props) {
    super(props);
  }

  goToPage(page){
    RootNavigation.navigate(page,{})
  }

  render() {
    return(
      <View style={{flex:1,backgroundColor:'#fff'}}>
        <CustomerHeader title={'系统设置'} style={{backgroundColor: '#fff'}} leftOnPress={()=>{this.props.navigation.pop()}}></CustomerHeader>
        <ScrollView style={{flex:1,backgroundColor:'#F6F6F6'}}>
          <View>
            <Cell title={'账号设置'} bottomLine={true}></Cell>
            <Cell title={'收货地址'} bottomLine={true} callBack={()=>{this.goToPage('AddressList')}}></Cell>
            <Cell title={'黑名单'} bottomLine={true} callBack={()=>{this.goToPage('BlackList')}}></Cell>
            <Cell title={'推送消息通知'} content={'去开启'}></Cell>
            <View style={{height:10,backgroundColor:'#F6F6F6'}}></View>
            <Cell title={'关于ICON'} bottomLine={true}></Cell>
            <Cell title={'用户协议'} bottomLine={true}></Cell>
            <Cell title={'隐私政策'}></Cell>
            <View style={{height:10,backgroundColor:'#F6F6F6'}}></View>
            <Cell title={'清理缓存'} contentColor={'#E39354'} content={'3.81M'}></Cell>
            <View style={styles.logutBox}>
              <Text style={styles.logotTitle}>退出登录</Text>
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  cell:{
    backgroundColor:'#fff',
    height:50,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    paddingHorizontal:15
  },
  title:{
    color:'#111111',
    fontSize:15
  },
  right:{
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  content:{
    color:'#999999',
    fontSize:15,
    marginRight:12
  },
  bottomLine:{
    position:'absolute',
    left:15,
    right:15,
    bottom:0,
    height: 1,
    backgroundColor: '#F6F6F6'
  },
  logutBox:{
    backgroundColor:'#fff',
    height:50,
    marginTop:92
  },
  logotTitle:{
    color:'#F74141',
    fontSize:15,
    lineHeight:50,
    flex:1,
    textAlign:'center'
  }
})
